<!DOCTYPE html>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page trimDirectiveWhitespaces="true"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	response.setHeader("pragma", "no-cache");
	response.setHeader("Cache-Control", "no-cache");

	// 動画一覧取得
	request.setAttribute("videoList",
			jp.co.jmas.jmasvideo.Util.getVideoList());
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jmasvideo</title>
</head>
<body>
	<c:choose>
		<c:when test="${empty videoList}">
			<p>no video</p>
		</c:when>
		<c:otherwise>
			<table border="1">
				<c:forEach items="${videoList}" var="video">
					<tr>
						<td><video width="320" height="240"
								poster="https://storage.cloud.google.com/jmas_camera/${video.key}.jpg"
								preload="none" controls="controls">
								<source
									src="https://storage.cloud.google.com/jmas_camera/${video.key}.mp4"
									type="video/mp4" />
							</video>
						<td valign="top">
							<h1>
								<c:out value='${video.title}' />
							</h1>
							<p>
								<c:out value='${video.desc}' />
							</p>
							<p>
								撮影日時：
								<fmt:formatDate pattern="yyyy-MM-dd HH:mm:ss Z"
									value="${video.date}" timeZone="Asia/Tokyo" />
							</p>
							<p>
								サイズ:
								<fmt:formatNumber type="number" pattern="####.#MB"
									value="${video.size / 1024 / 1024.0}" />
							</p>
						</td>
					</tr>
				</c:forEach>
			</table>
		</c:otherwise>
	</c:choose>
</body>
</html>
